<template>
	<div class="AddDialog">
		<el-dialog :close-on-click-modal="closeOnClickModal" :title="title" v-model="visible" width="600px" @open="open" @closed="dialogClosed">
			<div class="form_wrap">
				<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="120px">
					<el-form-item prop="attrName" label="商品维度名称">
						<el-input maxlength="200" v-model="ruleForm.attrName" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="是否启用">
						<MySwitch v-model="ruleForm.status" />
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="visible = false">取 消</el-button>
					<el-button type="primary" :loading="loading" @click="toSave">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import dialog from '/@/mixins/dialog';
import { ElMessage } from 'element-plus';
export default {
	name: 'AddDialog',
	mixins: [dialog],
};
</script>
<script setup>
import MySwitch from '/@/components/base/MySwitch.vue';
import { useProductApi } from '/@/api/product';
const { addDimension, editDimension } = useProductApi();
const props = defineProps({
	isAdd: Boolean,
	itemInfo: Object,
	typeName: String,
});
const emit = defineEmits(['update:modelValue', 'refresh']);
const rules = {
	attrName: [{ required: true, trigger: 'blur', message: '请输入名称' }],
};
const title = computed(() => (props.isAdd ? '新增' : '修改') + '商品维度名称');

const ruleForm = ref({ status: 1 });
const formRef = ref();
const open = () => {
	if (!props.isAdd) {
		ruleForm.value = { ...props.itemInfo };
	}
};
const dialogClosed = () => {
	ruleForm.value = {};
	formRef.value.resetFields();
};
const loading = ref(false);
const toSave = () => {
	formRef.value.validate(async (valid) => {
		if (valid) {
			loading.value = true;
			let res = props.isAdd ? await addDimension(ruleForm.value) : await editDimension(ruleForm.value);
			loading.value = false;
			if (res.code !== 200) return;
			emit('update:modelValue', false);
			ElMessage.success('保存成功！');
			emit('refresh');
		}
	});
};
</script>
